<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Examples & Documentation - Puppertino Framework</title>
    <link
      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900:500,800&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
    />
    <link rel="stylesheet" type="text/css" href="../dist/css/buttons.css" />
    <link rel="stylesheet" type="text/css" href="../dist/css/cards.css" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
  </head>
  <body class="p-layout">
    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope">Examples</a>
    </div>
    <h1>Documentation and Examples</h1>
    <p>Find how to use every component on Puppertino.</p>
    <div class="row around-xs">
      <div class="col-xs-9 col-sm-4">
        <a href="buttons.html" class="p-card">
          <div class="p-card-content">
            <h3 class="p-card-title">Buttons</h3>
            <p class="p-card-text">Fancy buttons of macOS? We have them.</p>
          </div>
        </a>
      </div>

      <div class="col-xs-9 col-sm-4">
        <a href="forms.html" class="p-card">
          <div class="p-card-content">
            <h3 class="p-card-title">Forms</h3>
            <p class="p-card-text">
              Create elegant forms. Using our amazing components.
            </p>
          </div>
        </a>
      </div>

      <div class="col-xs-9 col-sm-4">
        <a href="modals.html" class="p-card">
          <div class="p-card-content">
            <h3 class="p-card-title">Modals</h3>
            <p class="p-card-text">
              Trying to show a warning? Do it in a cool way.
            </p>
          </div>
        </a>
      </div>

      <div class="col-xs-9 col-sm-4">
        <a href="icons.html" class="p-card">
          <div class="p-card-content">
            <h3 class="p-card-title">Icons</h3>
            <p class="p-card-text">
              Complement your beautiful app with curated icons.
            </p>
          </div>
        </a>
      </div>

      <div class="col-xs-9 col-sm-4">
        <a href="layout.html" class="p-card">
          <div class="p-card-content">
            <h3 class="p-card-title">Layout</h3>
            <p class="p-card-text">
              Font sizing based on human guidelines for you web/app.
            </p>
          </div>
        </a>
      </div>

      <div class="col-xs-9 col-sm-4">
        <a href="color_palette.html" class="p-card">
          <div class="p-card-content">
            <h3 class="p-card-title">Colors</h3>
            <p class="p-card-text">
              Use the vibrant colors of Puppertino to make your project
              beautiful.
            </p>
          </div>
        </a>
      </div>


      <div class="col-xs-9 col-sm-4">
        <a href="segmented_controls.html" class="p-card">
          <div class="p-card-content">
            <h3 class="p-card-title">Segmented controls</h3>
            <p class="p-card-text">
              The magnificent segmented controls of iOS are now in 
              Puppertino.
            </p>
          </div>
        </a>
      </div>

    </div>
  </body>
</html>
